import { BmInput } from '@/components/form/BmInput'
import { BmRadioGroup } from '@/components/form/BmRadioGroup'
import { Button } from '@/components/ui/button'
import { useAuth } from '@/hooks/useAuth'
import { useUpdateUserMutation } from '@/services/user'
import { IUser } from '@/type/user'
import { useForm } from '@tanstack/react-form'

export const Base = () => {
  const { getAllFields } = useAuth()
  const updateUserMutation = useUpdateUserMutation()
  const form = useForm({
    defaultValues: getAllFields(),
    onSubmit: ({ value }) => {
      updateUserMutation.mutate(value)
    }
  })
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        e.stopPropagation()
        form.handleSubmit()
      }}>
      <BmInput<IUser> fieldName="nickname" formObject={form} label="网站昵称" />
      <BmRadioGroup<IUser>
        fieldName="sex"
        formObject={form}
        label="性别"
        options={[
          { label: '男', value: '1', id: 'boy' },
          { label: '女', value: '2', id: 'girl' }
        ]}
      />
      <BmInput<IUser> fieldName="home" formObject={form} label="个人站点" />
      <BmInput<IUser> fieldName="weibo" formObject={form} label="微博" />
      <BmInput<IUser> fieldName="qq" formObject={form} label="QQ号" />
      <BmInput<IUser> fieldName="github" formObject={form} label="Github" />
      <Button variant="default">保存提交</Button>
    </form>
  )
}
